<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家谱可视化系统</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link rel="stylesheet" href="family.css">
</head>

<body>
    <!-- 控制区域 -->
    <div class="control-area">
        <div class="title">家谱可视化系统</div>
        <div class="buttons">
            <input type="file" id="file-input" accept=".csv" style="display: none;">
            <button class="btn btn-primary" id="select-file-btn">选择文件</button>
            <button class="btn btn-secondary" id="export-pdf-btn">导出PDF</button>
        </div>
    </div>

    <!-- Tab区域 -->
    <div class="tabs">
        <div class="tab-buttons" id="tab-buttons">
            <!-- Tab按钮将通过JS动态生成 -->
        </div>
    </div>

    <!-- 可视化区域 -->
    <div class="visualization-area">
        <div id="tree-container"></div>
        <div class="zoom-buttons">
            <button class="zoom-btn" id="zoom-in">+</button>
            <button class="zoom-btn" id="zoom-out">-</button>
            <button class="zoom-btn" id="reset-zoom">↺</button>
        </div>
    </div>

    <script src=family.js>
    </script>
</body>

</html>